<template>
  <div class="box">
    <div v-show="add">
      <el-card>
        <AddConfigure
          ref="configure"
          @handleOutChainFlag="handleOutChainFlag"
        />
        <AddContent ref="content" v-show="!outChainFlag" />
        <AddAnnexes
          style="z-index: 1"
          :moduleList="moduleList"
          ref="annexes"
          :outChainFlag="outChainFlag"
        />
      </el-card>
    </div>
    <div v-show="!add">
      <Previews :previewsObj="previewsObj" />
    </div>
    <el-card style="margin-top: 12px">
      <div>
        <el-button type="primary" @click="handleAdd(2)">提交</el-button>
        <el-button @click="handleAdd(1)">保存草稿</el-button>
        <el-button @click="handlePreviews" v-show="add && !outChainFlag"
          >预览
        </el-button>
        <el-button @click="handleBack" v-show="!add && !outChainFlag"
          >返回
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import AddConfigure from "./AddConfigure.vue";
import AddContent from "./AddContent.vue";
import AddAnnexes from "./AddAnnexes.vue";
import Previews from "./Previews.vue";

import {
  getArticleModuleListApi,
  insertArticleApi,
} from "@/api/modules/article.api";
import { mapMutations } from "vuex";

export default {
  components: {
    AddConfigure,
    AddContent,
    AddAnnexes,
    Previews,
  },
  data() {
    return {
      visible: false,
      active: 0,
      moduleList: [],
      add: true,
      previewsObj: {},
      outChainFlag: false,
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async handleAdd(status) {
      const configureObj = this.$refs.configure.getContent();
      const content = this.$refs.content.getContent();
      const annexesObj = this.$refs.annexes.getContent();
      const obj = {
        ...configureObj,
        content,
        ...annexesObj,
        status,
      };

      obj.moduleId = obj.modelId.slice(-1)[0];
      let code = "";
      this.moduleList.forEach((item) => {
        if (item.moduleId === obj.modelId[0]) {
          code = item.code;
        }
      });
      obj.code = code;
      delete obj.modelId;
      // console.log("obj123123123", obj);
      await insertArticleApi(obj);
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.$router.push({ path: "/writings/list" });
      this.setBreadcrumb([
        {
          name: "文章管理",
          path: "/writings",
        },
        {
          name: "文章列表",
          path: "/writings/list",
        },
      ]);
    },
    async getTableData() {
      this.moduleList = await getArticleModuleListApi();
    },
    handlePreviews() {
      const configureObj = this.$refs.configure.getContent();
      const contentObj = this.$refs.content.getContent();
      const annexesObj = this.$refs.annexes.getContent();
      const obj = {
        ...configureObj,
        content: contentObj,
        fileList: annexesObj.fileList,
        status: 1,
      };

      // console.log("this.moduleList", this.moduleList);
      // console.log("this.modelId", obj.modelId);
      // obj.boldFlag = obj.checkedCities?.includes("加粗");
      // obj.topFlag = obj.checkedCities?.includes("置顶");
      // obj.pushSchool = obj.checkedCities?.includes("推送学校");
      obj.outChainFlag = obj.outChainFlag === "0";
      // delete obj.checkedCities;
      this.previewsObj = obj;
      this.add = false;
    },
    handleBack() {
      this.add = true;
    },
    handleOutChainFlag(value) {
      this.outChainFlag = value;
    },
  },
};
</script>
<style scoped>
.box {
  min-height: calc(100vh - 60px - 50px - 24px - 160px);
  padding-bottom: 24px;
}
</style>
